<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box1 {
            width: 200px;
            height: 200px;
            background-color: #bfa;
            /* 通过浮动 使元素 向左 向右移动 向父元素的左侧 右侧移动  */
            /* 使用float属性  在父元素內左右移动*/
            float:left
            /* 设置浮动后 水平布局不需要强制成立 外边距取消了 */
            /* 会完全从文档中脱离  不在占用文档流的位置 */
            /* 所以 元素下面额还在文档流中的元素会自动向上移动 */
            /* 元素也会向左 向右移动 */
            /* 浮动元素默认不会从父元素中移出 */
            /* 默认情况下 并不会移出去 */
            /* 浮动元素不会盖住文字  */
            /* 文字会自动环绕在浮动元素周围 */
            /* 可以利用浮动来设置文字环绕图片的效果 */
            /* 文字环绕图片 */
            /* none left right  */

        }

        .box2 {
            width: 200px;
            height: 200px;
            background-color: orange;
            float:left/* box1已经占据了位置 box2无法浮动到左侧*/
            /* 这样可以让元素按输入的顺序并排排列 */
            /* 浮动的效果  元素可以并排排列 */
            /* 完全脱离文档流  设置浮动后 元素会向左右移动 */
            /* 浮动元素不会自动盖住其他的浮动元素  按顺序嘛 */
            /* 这样就达成了很想布局  脱离文档流 尽量向左 向右移动 */
            /* 没有浮动的块元素就是无法逾越的 */
            /* 如果上面是一个无法浮动的块元素 则浮动元素无法上移 */
            /* 第一行如果可以容纳所有就容纳  容纳不下 就换行 */
            /* 浮动元素不会超过上面的兄弟元素 最多就是和他一样高 */
            /* 可以通过结构 去改变 */
            /* 主要作用 让页面中的元素可以水平排列 */
            /* 都浮动起来 */
        }
    </style>
</head>

<body>
    <div class="box1"></div>
    <div class="box2"></div>
</body>

</html>